﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="">
    <meta name="keywords" content="0">
    <title>伯虎物联</title>
	<link rel="stylesheet" href="${s.base}/mobile/css/style.css">
	<link rel="stylesheet" href="${s.base}/js/layui/css/layui.css" media="all" />
	<script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
	<script type="text/javascript" src="${s.base}/jslayui/layui.js"></script>
    <style type="text/css">


               body {
	           
                        background:#0099cc;
                        width:100%; 
                        height:100%; 
                   
                    }
		#head{width: 96%;height: 80px;margin-left: 2%;}
		#head ul{width: 100%;}
		#head ul li{float: left;line-height: 80px;}
		#head ul .title{width: 50%; text-align: left;font-size: 30px;color:#ffffff;font-weight: bold;}
		#head ul .btn{width: 50%; text-align: right;line-height: 80px;}
		#head ul .btn input{float: right; margin-right: 5%; width: auto; height: 36px; margin-top: 22px;font-size: 18px;color:#ffffff;}
		#content{width: 96%;margin-left: 2%;}
		#content ul{width: 100%;}
		#content ul li{width: 100%; text-align: center;}
		#content ul .content_show{width: 50%; text-align: center;float: left;}
		#content ul .content_show img{width: 90%; text-align: center;}
		.line40{line-height:40px}
		.line80{line-height:30px}
		.line140{line-height:140px}
		.font1{font-size: 25px;color: #ffffff;}
		.font2{font-size: 120px;color: #ffffff;}
		.font3{font-size: 25px;}
		.red{color:#FF0000;}
		.org{color:#F77303;}
		.gree{color:#9AFC02;}
	</style>
</head>

<body style="max-width:640px;">
   <!--<div style="position:absolute; width:100%; height:100%; z-index:-1"> 
	<img style="position:fixed;" src="${s.base}/mobile/img/head-bg.png" height="100%" width="100%" />
   </div>-->
  
  <div id="head">
  	<ul>
  		<li class="title">
  			伯虎物联
  		</li>
  		<li class="btn">
  			<input type="button" onClick="window.location.href='/phone/index/${openid}'" class="layui-btn layui-btn-radius layui-btn-normal" value="返回"/>
  			<input type="button" onClick="window.location.href='/phone/relaySet/${openid}?relayId=${relay.relayId}&relayEntityId=${relay.id}'" class="layui-btn layui-btn-radius layui-btn-normal" value="设置"/>
  			
 		</li>
  	</ul>
  </div>
  <div id="content">
  	<input type="hidden" id="openid" value="${openid}"/>
  	<ul>
  		<li class="line80 font1">当前档位</li>
  		<li class="line180 font2">${relay.km}</li>


		<li>
			<div class="content_show line80 font1">
				状态：
				<#if relay.power=="1">
					<span class="gree">打开</span>
				<#else>
					<span class="red">关闭</span>
				</#if>

			</div>
			<div class="content_show line80 font1">
				模式：
				<#if relay.auto=="1">
					自动
					<#else>
						手动
				</#if>

			</div>
		</li>
		<li>
			<div class="content_show line80 font1">
				<img src="${s.base}/mobile/img/open.png" onclick="relayUpdate('1','${relayEntityId}')"/>
			</div>
			<div class="content_show line80 font1">
				<img src="${s.base}/mobile/img/shang.png" onclick="relayUpdate('2','${relayEntityId}')"/>
			</div>
		</li>
		<li>
			<div class="content_show line80 font1">
				<img src="${s.base}/mobile/img/shou.png" onclick="relayUpdate('3','${relayEntityId}')"/>
			</div>
			<div class="content_show line80 font1">
				<img src="${s.base}/mobile/img/jiang.png" onclick="relayUpdate('4','${relayEntityId}')"/>
			</div>
		</li>

		<#if relay.deviceType=="1">
			<li class="line40 font3 gree">设备在线</li>
		<#else>
			<li class="line40 font3 red">设备离线</li>
		</#if>
  	</ul>
	  <script type="text/javascript">
          function relayUpdate(type,relayEntityId) {
              var openid=$("#openid").val();
              $.ajax({
                  type: "POST",
                  url: "/phone/updateRelay",
                  data: {"type":type,"relayEntityId":relayEntityId},
                  success: function(result){
                      if(1==result.returnInfo.state){
                          window.location.href='/phone/relay/'+openid+'?relayEntityId='+relayEntityId;
                      }else{
                          alert(result.returnInfo.errorMsg);
                      }
                  },
                  error: function(result){
                      alert(result);
                  }
              });
          }

          $(document).on('click', 'img',function (d) {
              d.preventDefault();
          });
	  </script>
  </div>
</body>

</html>
